import React, { Component } from 'react'
import { TabBar } from 'antd-mobile'
import './index.less'


export default class MainTabBar extends Component{

    constructor(props){
        super(props)


        this.state = {

            actionTab: 'home',
            
            items: [

                {
                    title: 'home',
                    key: 'home',
                    icon: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg',
                    selectedIcon: 'https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg'
                },
                {
                    title: 'product',
                    key: 'product',
                    icon: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg',
                    selectedIcon: 'https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg'
                },
                
            ]
            
        }

        this.createOpress = this.createOpress.bind(this)
    }

    createOpress(label){
        const _this = this;

        return () =>{
            _this.setState(
                {
                    actionTab: label
                }
            ) 
        }
        
    }

    render (){

        const props = {
            unselectedTintColor:"#949494",
            tintColor:"#33A3F4",
            barTintColor:"#fff",
        }

        const { items, actionTab } = this.state
    
        return (
            <div className="main-tab-bar">
            <TabBar {...props}>
    
                {
                    items.map((item, index) =>(

                        <TabBar.Item
                            icon={{ uri: item.icon }}
                            selectedIcon={{ uri: item.selectedIcon }}
                            title={item.title}
                            key={item.key}
                            onPress={ this.createOpress(item.key) }
                            selected={ actionTab === item.key}>
                        </TabBar.Item>
                        
                    ))
                }
    
    
            </TabBar>
            </div>
        )
    
    }

    
    
}




